<template>
  <div class="squareFun">
    <div class="squareFun-top">
      <router-link tag="div" to="/home" class="left">
        <span class="iconfont icon-arrow-left-bold"></span>
        歌单广场
      </router-link>
    </div>
    <div class="squareFunlist">
      <ul>
        <li class="con">推荐</li>
        <li>官方</li>
        <li>精品</li>
        <li>共享歌单</li>
        <li>华语</li>
        <li>流行</li>
        <li>摇滚</li>
      </ul>
      <div class="iconfont icon-qita"></div>
    </div>
    <div class="box" v-if="PLAYLIST.uiElement">
      <h3>{{ PLAYLIST.uiElement.subTitle.title }}</h3>
      <div class="boxlist">
        <ul>
          <li v-for="(item, index) in PLAYLIST.creatives" :key="index">
            <div class="img">
              <img :src="item.uiElement.image.imageUrl" />
              <div class="players">
                <div class="num">
                  <span class="iconfont icon-bofang"></span
                  >{{
                    item.resources[0].resourceExtInfo.playCount | playCountNum
                  }}
                </div>
              </div>
            </div>
            <p>{{ item.uiElement.mainTitle.title }}</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="songListNum">
      <div class="title">
        <h3>今日达人推荐</h3>
      </div>
      <div class="lists" v-if="result">
        <ul>
          <router-link
            tag="li"
            :to="'/songList?id=' + item.id"
            v-for="item in result"
            :key="item.id"
          >
            <div class="img">
              <img :src="item.picUrl + '?param=140y140'" />
              <div class="players">
                <div class="num">
                  <span class="iconfont icon-bofang"></span
                  >{{ item.playCount | playCountNum }}
                </div>
              </div>
            </div>
            <p>{{ item.name }}</p>
          </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getHomepage, getpersonalized } from "../api/home";
export default {
  data() {
    return {
      PLAYLIST: {
        uiElement: "",
        creatives: [],
      },
      result: [], //今日达人推荐
    };
  },
  methods: {
    getHomepageFun() {
      //首页
      getHomepage().then((data) => {
        this.PLAYLIST = data.data.blocks[3];
        // console.log(this.PLAYLIST, "blocks[3]");
      });
    },
    //推荐歌单
    getpersonalizedFun() {
      getpersonalized().then((data) => {
        // console.log(data, "推荐歌单");
        this.result = data.result;
        // console.log(this.result,"推荐歌单")
      });
    },
  },
  created() {
    this.getHomepageFun(); //首页数据
    this.getpersonalizedFun(); //今日达人推荐
  },
  //过滤器
  filters: {
    playCountNum(v) {
      let w = v > 10000 ? v / 10000 : v; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less">
.squareFun {
  width: 100%;
  height: 100%;
  .squareFun-top {
    height: 46px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    .left {
      height: 46px;
      line-height: 46px;
      text-align: center;
      font-size: 15px;
      font-weight: 600;
      span {
        display: inline-block;
        width: 40px;
        height: 46px;
        font-size: 14px;
      }
    }
  }
  .squareFunlist {
    margin-top: 10px;
    display: flex;
    ul {
      overflow-x: scroll;
      width: 84%;
      height: 28px;
      margin-left: 14px;
      display: flex;
      li {
        margin-right: 24px;
        font-size: 12px;
        color: #888888;
        flex-shrink: 0;
        font-weight: 400;
        &.con {
          color: #1f1f1f;
        }
      }
    }
    .iconfont {
      width: 49px;
      height: 28%;
      font-size: 20px;
      text-align: center;
      border-left: 1px solid #e6e6e6;
    }
  }
  .box {
    padding-left: 15px;
    padding-bottom: 15px;
    border-radius: 0px 0px 7px 7px;
    h3 {
      margin-top: 15px;
      height: 31px;
      line-height: 31px;
      padding-left: 20px;
      font-size: 16px;
      background: url("../assets/img/01.png") no-repeat left center;
      background-size: 18px;
    }
    .title {
      display: flex;
      justify-content: space-between;
      h3 {
        height: 44px;
        line-height: 44px;
      }
      .more {
        height: 20px;
        line-height: 21px;
        width: 42px;
        border: 1px solid #f7f7f7;
        border-radius: 10px;
        font-size: 10px;
        text-align: center;
        margin-top: 13px;
        margin-right: 12px;
        .iconfont {
          font-size: 10px;
        }
      }
    }
    .boxlist {
      padding-top: 2px;
      ul {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        li {
          width: 110px;
          margin-right: 7px;
          margin-bottom: 30px;
          .img {
            box-shadow: 0px -2px 1px #f2f2f2;
            width: 110px;
            height: 110px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            .players {
              position: absolute;
              top: 2px;
              right: 2px;
              height: 14px;
              line-height: 14px;
              color: #fff;
              background-color: #c5c5c5;
              border-radius: 7px;
              font-size: 10px;
              .num {
                transform: scale(0.8);
                .iconfont {
                  font-size: 8px;
                }
              }
            }
            img {
              width: 110px;
              height: 110px;
            }
          }
          p {
            font-size: 12px;
            color: #353535;
            height: 32px;
            overflow: hidden;
          }
        }
      }
    }
  }
  .songListNum {
    background: #fff;
    padding-left: 12px;
    padding-bottom: 12px;
    border-radius: 0px 0px 7px 7px;

    .title {
      display: flex;
      justify-content: space-between;
      h3 {
        height: 44px;
        line-height: 44px;
      }
      .more {
        height: 20px;
        line-height: 21px;
        width: 42px;
        border: 1px solid #f7f7f7;
        border-radius: 10px;
        font-size: 10px;
        text-align: center;
        margin-top: 13px;
        margin-right: 12px;
        .iconfont {
          font-size: 10px;
        }
      }
    }
    .lists {
      overflow-y: scroll;
      padding-top: 2px;
      ul {
        display: flex;
        li {
          width: 110px;
          margin-right: 7px;
          .img {
            box-shadow: 0px -2px 1px #f2f2f2;
            width: 110px;
            height: 110px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            .players {
              position: absolute;
              top: 2px;
              right: 2px;
              height: 14px;
              line-height: 14px;
              color: #fff;
              background-color: #c5c5c5;
              border-radius: 7px;
              font-size: 10px;
              .num {
                transform: scale(0.8);
                .iconfont {
                  font-size: 8px;
                }
              }
            }
            img {
              width: 110px;
              height: 110px;
            }
          }
          p {
            font-size: 12px;
            color: #353535;
            height: 32px;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>